<html>
  <head></head>
  <body>
    <div id="list"></div>
    <script>
      // --使用代理解决跨域问题
      fetch("http://localhost:3000/api/hero")
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
          const list = document.getElementById("list");
          const ul = document.createElement("ul");
          list.appendChild(ul);
          data.forEach((item) => {
            const li = document.createElement("li");
            li.innerHTML = `<a href="herodetail/shaosiyuan.shtml" target="_blank">
                <img src="//game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg" width="91" height="91" alt="少司缘">${item.cname}</a>`;
            list.appendChild(li);
          });
        });
      // --使用jsonp解决跨域问题
      function request(url) {
        return new Promise((resolve, reject) => {
          const callbackName =
            "__callback" + Math.random().toString().substr(2, 5);
          window[callbackName] = function (data) {
            script.remove();
            delete window[callbackName];
            resolve(data);
          };
          const script = document.createElement("script");
          script.src = `${url}?callback=${callbackName}`;
          document.body.appendChild(script);
        });
      }
      request("http://localhost:3000/api/jsonp")
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {});
      request("http://localhost:3000/api/jsonp")
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {});
      request("http://localhost:3000/api/jsonp")
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {});
      //   fetch("https://pvp.qq.com/web201605/js/herolist.json", {
      //     headers: {
      //       a: 1,
      //     },
      //   })
      //     .then((resp) => resp.json())
      //     .then((data) => {
      //       console.log(data);
      //     });
    </script>
    <style>
        ul,li{list-style: none;}
      #list {
        width: 100%;
        height: 100%;
        background-color: #ccc;display: flex;flex-direction: row; /* 默认值，横向排列 */
        flex-wrap: wrap;
      }
    </style>
  </body>
</html>
